<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- production version, optimized for size and speed -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>

    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{ message }}</p>
    <br>
    <textarea v-model="message" placeholder="add multiple lines">
    </textarea>

    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>

    <div id='example-3'>
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
    </div>

    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>

    <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>

    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>Selected: {{ selected }}</span>

    <!-- `picked` is a string "a" when checked -->
    <input type="radio" v-model="picked" value="a">
    <!-- `toggle` is either true or false -->
    <input type="checkbox" v-model="toggle">
    <!-- `selected` is a string "abc" when the first option is selected -->
    <select v-model="selected">
        <option value="abc">ABC</option>
    </select>

    <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">

    <input type="radio" v-model="pick" v-bind:value="a">

    <select v-model="selected">
        <!-- inline object literal -->
        <option v-bind:value="{ number: 123 }">123</option>
    </select>

    <!-- synced after "change" instead of "input" -->
    <input v-model.lazy="msg">

    <input v-model.number="age" type="number">

    <input v-model.trim="msg">

    
    <script>
        new Vue({
            el: '#example-3',
            data: {
                checkedNames: []
            }
        })

        new Vue({
            el: '...',
            data: {
                selected: 'A',
                options: [
                    { text: 'One', value: 'A' },
                    { text: 'Two', value: 'B' },
                    { text: 'Three', value: 'C' }
                ]
            }
        })
    </script>
</body>

</html>